<template>
  <div>
    <div class="main">
      <div class="editor-wrapper">
        <Editor
          class="editor"
          :preview="true"
          ref="myEditor"
          @ready="editorReady"
        ></Editor>
      </div>
    </div>
    <div class="bottom-bar">
      <div class="top">
        <checkbox-group @change="handleChange">
          <checkbox
            :value="true"
            :checked="false"
            color="#FFCC33"
            style="transform: scale(0.7)"
          />
        </checkbox-group>
        我已同意<span class="strong">《飞鸽邮筒用户协议》》</span>
      </div>
      <div class="bottom">
        <button plain="true" class="submit" @tap="next">确认</button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Editor from "@/components/editor/editor.vue";
import { mapState } from "vuex";

export default Vue.extend({
  computed: {
    ...mapState("setting", ["statement"]),
  },
  data() {
    return {
      nextPage: "",
      checked: "false",
    };
  },
  onLoad(ops: any) {
    this.nextPage = decodeURIComponent(ops.url);
  },
  methods: {
    editorReady() {
      let editor = this.$refs.myEditor as any;
      setTimeout(() => {
        editor.setContent(this.statement);
      }, 1000);
    },
    next() {
      if (this.checked == "true") {
        console.log(this.nextPage);

        uni.navigateTo({ url: this.nextPage });
      } else {
        uni.showToast({ title: "请同意用户协议", icon: "error" });
      }
    },
    handleChange(value: any) {
      this.checked = value.detail.value[0];
    },
  },
  components: { Editor },
});
</script>
<style lang="scss" scoped>
.main {
  border-radius: 15rpx;
  margin: 0 20rpx;
  padding: 20rpx;
  .editor-wrapper {
    height: 80vh;
    overflow: scroll;
    .editor {
      height: unset;
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  .bottom {
    .submit {
      width: 300rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      margin-top: 50rpx;
      margin-bottom: 30rpx;
      border: 0;
      color: white;
      box-shadow: 10rpx 10rpx 15rpx rgb(245, 245, 245);
      background-color: rgb(0, 170, 255);
    }
  }
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    width: 100%;
    font-size: 20rpx;
    text-align: center;
    color: #d3d3d3;
    .strong {
      color: red;
      display: inline-block;
    }
  }
}
</style>
